<template>
  <div>
    <jxf-titletip :title="title" @refreshPage="refreshFuc"></jxf-titletip>
    <div v-show="!isShowDetail">
      <el-card class="mt20">
        <el-form :inline="true" :model="searchInfo" ref="searchInfo">
          <el-form-item label="采购商企业名称:" prop="orderNo">
            <el-input v-model="searchInfo.orderNo" ref="input-orderNo" @keyup.enter.native="enterNextInput('merchantName')"></el-input>
          </el-form-item>
          <el-form-item label="还款状态:" prop="repayType">
            <el-select v-model="searchInfo.repayType" clearable placeholder="全部">
              <el-option label="部分还款" value="0"></el-option>
              <el-option label="全部还款" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSearch()">搜索</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="info" @click="resetForm('searchInfo')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card class="jxf-table-card mt20">
        <div slot="header" class="clearfix">
          <span>数据列表</span>
          <div>
            <el-button type="primary" @click="exportExcel" :loading="isSuccess">导出</el-button>
          </div>
        </div>
        <jxf-table class="" :table="dataTable">
          <template slot="breakState" slot-scope="scope">
            <div v-if="scope.row.breakState == '0'">未违约</div>
            <div v-if="scope.row.breakState == '1'">已违约</div>
          </template>
          <template slot="outState" slot-scope="scope">
            <div v-if="scope.row.outState == '1'">已出账</div>
            <div v-if="scope.row.outState == '2'">未出单</div>
          </template>
          <template slot="repayType" slot-scope="scope">
            <div v-if="scope.row.repayType == '0'">线上还款</div>
            <div v-if="scope.row.repayType == '1'">线下还款</div>
          </template>
          <template slot="repayStatus" slot-scope="scope">
            <div v-if="scope.row.repayStatus == '0'">全额还款</div>
            <div v-if="scope.row.repayStatus == '1'">部分还款</div>
          </template>
          <template slot="status" slot-scope="scope">
            <div v-if="scope.row.status == '0'">待审核</div>
            <div v-if="scope.row.status == '1'">已通过</div>
            <div v-if="scope.row.status == '2'">已驳回</div>
          </template>
          <template slot="createTime" slot-scope="scope">
            <div>{{scope.row.createTime ? FormatDate.timeFormat(scope.row.createTime) : ""}}</div>
          </template>
          <template slot="repayCredit" slot-scope="scope">
            <div>￥{{scope.row.repayCredit && scope.row.repayCredit != 0 ? formatMoney.twoDecimal(scope.row.repayCredit) : '0.00'}}</div>
          </template>
          <template slot="repayInterest" slot-scope="scope">
            <div>￥{{scope.row.repayInterest && scope.row.repayInterest != 0 ? formatMoney.twoDecimal(scope.row.repayInterest) : '0.00'}}</div>
          </template>
          <template slot="credit" slot-scope="scope">
            <div>￥{{scope.row.credit && scope.row.credit != 0 ? formatMoney.twoDecimal(scope.row.credit) : '0.00'}}</div>
          </template>
          <template slot="repayPrincipal" slot-scope="scope">
            <div>￥{{scope.row.repayPrincipal && scope.row.repayPrincipal != 0 ? formatMoney.twoDecimal(scope.row.repayPrincipal) : '0.00'}}</div>
          </template>
          <template slot="operation" slot-scope="scope">
            <el-button type="text" @click="reviewModel(scope.row)" v-if="scope.row.status == '0'">审核</el-button>
            <el-button type="text" @click="watchDetail(scope.row)" v-else>审核记录</el-button>
          </template>
        </jxf-table>
      </el-card>
      <jxf-pagination class="mt20" :pageTotal="pageTotal" :currentPage.sync='currentPage' :pageSize.sync="pageSize"
                      @currentPageChange="currentPageChange" @pageSizeChange="pageSizeChange"></jxf-pagination>
    </div>
    <RepaymentApproval :isShowDetail.sync="isShowRepay" :dataInfo="dataInfo"></RepaymentApproval>
  </div>
</template>

<script>
  import formatMoney from '@/assets/js/formatMoney'
  import FormatDate from '@/assets/js/formatDate'
  import RepaymentApproval from './components/RepaymentApproval'
  export default {
    name: "DefaultingBillList",
    components: { RepaymentApproval },
    data() {
      return {
        title: "违约账单列表",
        isShowDetail: false,
        isShowRepay: false,
        searchInfo: {
          breakState: null,
          enterpriseName: "",
          repayStatus: null,
          repayType: null
        },
        dataInfo: {},
        formatMoney: formatMoney,
        FormatDate: FormatDate,
        isSuccess: false,
        dataTable: {
          border:true,
          loading:false,
          hasSelect:false,
          tr: [
            {
              id: '1',
              label: '账单号',
              fixed: "left",
              prop: 'id'
            },
            {
              id: '2',
              label: '企业名称',
              prop: 'enterpriseName'
            },
            {
              id: '3',
              label: '发生月',
              prop: 'month'
            },
            {
              id: '4',
              label: '出账状态',
              prop: 'outState',
              show: 'template'
            },
            {
              id: '5',
              label: '账单总额',
              prop: 'breakState',
              show: 'template'
            },
            {
              id: '6',
              label: '应还本金',
              show: 'template',
              prop: 'credit'
            },
            {
              id: '7',
              label: '应还利息',
              show: 'template',
              prop: 'repayCredit'
            },
            {
              id: '8',
              label: '最终还款日',
              show: 'template',
              prop: 'repayPrincipal'
            },
            {
              id: '9',
              label: '延长还款日',
              show: 'template',
              prop: 'repayInterest'
            },
            {
              id: '10',
              label: '违约状态',
              show: 'template',
              prop: 'createTime'
            },
            {
              id: '11',
              label: '还款状态',
              show: 'template',
              prop: 'repayType'
            },
            {
              id: '12',
              label: '审核状态',
              show: 'template',
              prop: 'status'
            },
            {
              id: '14',
              label: '操作',
              show: 'template',
              fixed: 'right',
              minWidth:"200",
              prop: 'operation'
            }
          ],
          data: []
        },
        pageTotal:0,
        pageSize:10,
        currentPage:1
      }
    },
    methods: {
      exportExcel() {

      },
      // 切换页面
      currentPageChange(pageNo) {
        this.currentPage = pageNo
        this.getData()
      },
      // 切换页面条数
      pageSizeChange(pageNo) {
        this.pageSize = pageNo
        this.getData()
      },
      getData() {
        this.dataTable.loading = true;
        let data = {
          ...this.searchInfo,
          page: this.currentPage,
          pageSize: this.pageSize
        };
        ajax.post(apis.factory.getAduitList, data).then(res => {
          if(res.code === "10000000") {
            this.dataTable.data = res.data.dataList;
            this.pageTotal = res.data.total
          } else {
            this.$message.error(res.message)
          }
          this.dataTable.loading = false;
        })
      },
      watchDetail(obj) {
        let data = {
          repayId: obj.id
        }
        ajax.post(apis.factory.repayAuditRecord, data).then(res => {
          console.log(res)
        })
      },
      onSearch() {
        this.currentPage = 1;
        this.getData()
      },
      refreshFuc() {
        this.resetForm('searchInfo')
        this.pageSize = 10;
        this.currentPage = 1;
        this.getData()
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      reviewModel(obj) {
        this.dataInfo = obj
        this.isShowRepay = true;
      }
    },
    created() {
      this.onSearch()
    }
  }
</script>

<style lang="scss" scoped>

</style>
